<template>
    <div class="assess_form swallow">
        <div class="form_title">XXXX医疗机构</div>
        <div class="form_name">吞咽功能障碍评定表</div>
        <div class="form_patient_bar">
            <div v-for="(item, index) in patientStruct" :key="index" class="patient_info_item">
                <div class="item_label">{{ item.label }}：</div>
                <div class="item_value">{{ formType == 'template' ? item.label : patientInfo[item.key] }}</div>
            </div>
        </div>
        <div class="form_assess_method">
            饮水试验：让患者在端坐状态下饮30ml常温水，观察全部饮完的时间。见表所示
        </div>
        <el-form ref="assessForm" :model="selfFormData" :rules="rules" label-width="85px">
            <el-form-item prop="drinkWaterValue" label-width="0px">
                <table border class="form_table">
                    <colgroup>
                        <col>
                        <col style="width: 150px;">
                    </colgroup>
                    <thead>
                        <tr>
                            <th>项目</th>
                            <th class="text_center">评定</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in assessFormStruct" :key="index">
                            <td>{{ item.content }}</td>
                            <td v-if="formType === 'template'" class="text_center assess_radio">
                                <el-radio v-model="selfFormData.drinkWaterValue" :label="index + 1" disabled />
                            </td>
                            <td v-if="formType === 'view'" class="text_center checked">
                                <i v-if="selfFormData.drinkWaterValue === (index + 1)"
                                    class="el-icon-check check_icon" />
                            </td>
                            <td v-if="formType === 'edit'" class="text_center assess_radio">
                                <el-radio v-model="selfFormData.drinkWaterValue" :label="index + 1" />
                            </td>
                        </tr>
                    </tbody>
                </table>
            </el-form-item>
            <div>
                <div class="form_assess_title">评定标准：</div>
                <div class="form_assess_item">正常范围：一次饮完，在5秒以内</div>
                <div class="form_assess_item">可疑：一次饮完，在5秒以上，分二次饮完</div>
                <div class="form_assess_item">异常：上述（3）——（5）项</div>
            </div>
            <el-form-item v-if="formType !== 'template'" label="评定结果：" prop="evaluateResult"
                :class="{ checked: formType === 'view' && selfFormData.evaluateResult === 3 }">
                <el-radio-group v-if="formType === 'edit'" v-model="selfFormData.evaluateResult">
                    <el-radio :label="1">正常</el-radio>
                    <el-radio :label="2">可疑</el-radio>
                    <el-radio :label="3">异常</el-radio>
                </el-radio-group>
                <span v-if="formType === 'view'">{{ selfFormData.evaluateResult ? resultMap[selfFormData.evaluateResult]
                    : '' }}</span>
            </el-form-item>
            <el-form-item v-if="formType !== 'template'" label="备注信息：" prop="evaluateDesc">
                <el-input v-if="formType === 'edit'" v-model="selfFormData.evaluateDesc" type="textarea" :rows="3" />
                <span v-if="formType === 'view'">{{ selfFormData.evaluateDesc }}</span>
            </el-form-item>
            <div v-if="formType !== 'template'" class="assess_create_info">
                <div class="create_info_item">
                    <div class="item_label">评定者：</div>
                    <div class="item_value">{{ selfFormData.evaluateUser }}</div>
                </div>
                <div class="create_info_item">
                    <div class="item_label">评定时间：</div>
                    <div class="item_value">{{ selfFormData.evaluateTime }}</div>
                </div>
            </div>
        </el-form>
    </div>
</template>

<script>
const initDefaultForm = () => {
    return {
        drinkWaterValue: undefined,
        evaluateResult: undefined,
        evaluateDesc: '',
        evaluateUser: '',
        evaluateTime: ''
    }
}
const resultMap = {
    1: '正常',
    2: '可疑',
    3: '异常'
}
const assessFormStruct = [
    {
        content: '1、能一次饮完，无呛咳及停顿'
    },
    {
        content: '2、分二次饮完，但无呛咳及停顿'
    },
    {
        content: '3、能一次咽下，但有呛咳'
    },
    {
        content: '4、尽管分二次饮完，但有呛咳'
    },
    {
        content: '5、有呛咳，全部饮完有困难'
    }
]
export default {
    name: 'Swallow',
    props: {
        formType: {
            type: String,
            default: 'template' // 表单类型：template：模板，edit：评估，view：详情
        },
        patientInfo: {
            type: Object,
            default: () => ({}) // 患者信息
        },
        doctorType: {
            type: String,
            default: 'hospital' // 医生类型：hospital：住院医生，outpatient：门诊医生，therapists：治疗师
        },
        assessInfo: {
            type: Object,
            default: () => ({}) // 评定表信息
        }
    },
    data() {
        return {
            assessFormStruct,
            resultMap,
            selfFormData: {},
            rules: {
                drinkWaterValue: [
                    { required: true, message: '请选择项目', trigger: 'change' }
                ],
                evaluateResult: [
                    { required: true, message: '请选择评定结果', trigger: 'change' }
                ]
            }
        }
    },
    computed: {
        patientStruct() {
            if (this.formType === 'edit' || this.formType === 'view') {
                if (['hospital', 'therapists'].includes(this.doctorType)) {
                    return [{
                        label: '姓名',
                        key: 'patientName'
                    }, {
                        label: '病区',
                        key: 'sickRegion'
                    }, {
                        label: '床号',
                        key: 'bedNum'
                    }, {
                        label: '住院号',
                        key: 'admissionNum'
                    }]
                } else {
                    return [{
                        label: '姓名',
                        key: 'patientName'
                    }, {
                        label: '门诊号',
                        key: 'admissionNum'
                    }]
                }
            } else {
                return [{
                    label: '姓名',
                    key: 'patientName'
                }, {
                    label: '门诊号/住院号',
                    key: 'admissionNum'
                }]
            }
        }
    },
    watch: {
        assessInfo: function (val) {
            this.selfFormData = Object.assign(initDefaultForm(), this.assessInfo)
        }
    },
    mounted() {
        this.selfFormData = Object.assign(initDefaultForm(), this.assessInfo)


    },
    methods: {
        getFormData() {
            return new Promise((resolve, reject) => {
                this.$refs.assessForm.validate((valid) => {
                    if (valid) {
                        resolve({
                            ...this.selfFormData
                        })
                    } else {
                        reject('存在未通过表单校验的数据')
                        return false
                    }
                })
            })
        },
        changeToEstimateList(estimateId, submitForm) {
            const keyList = []
            Object.keys(submitForm).forEach(key => {
                if (submitForm[key]) {
                    keyList.push({
                        key,
                        value: JSON.stringify(submitForm[key])
                    })
                }
            })
            return JSON.stringify({
                estimateId,
                keyList
            })
        },
        async saveLocalFormData(source, patientId) {
            let data = await this.getFormData();
            const estimateId = 1
            const submitForm = {
                evaluateSource: source,
                drinkWaterValue: data.drinkWaterValue,
                evaluateResult: data.evaluateResult,
                evaluateDesc: data.evaluateDesc
            }
            localStorage.setItem(`estimate_${source}_${patientId}_${estimateId}`, this.changeToEstimateList(estimateId, submitForm));
        },
    }
}
</script>

<style lang="scss" scoped>
@import url('./style.scss');

.swallow {
    .form_assess_method {
        margin-bottom: 20px;
    }

    .assess_radio {
        ::v-deep .el-radio__label {
            display: none;
        }
    }

    .check_icon {
        font-size: 24px;
        vertical-align: middle;
    }
}
</style>
